<script setup lang="ts">
	import { ref} from 'vue';
	import type { ITabsItem } from '@/simba/types/index';
	
	const props= defineProps<{
		// listTabs: ITabsList
		list:ITabsItem[]
		choosedTab: ITabsItem //默认为选择，与list中的
	}>()	
	
	// let list = ref(props.list) // toRef(props.listTabs, 'list')
	let choosedTab = ref<ITabsItem>(props.choosedTab) // toRef(props.listTabs, 'choosedTab')
	//需要将choosedTab 暴露给父组件，与接收同名时可免暴露
	defineExpose({ choosedTab })

	//	自定义事件，可以在上级页面中执行
	const emit = defineEmits(["onTabsClick"])
	function onTabsClickHandler(item:ITabsItem){
		choosedTab.value = item
		// setTimeout(() => {
			emit('onTabsClick', item)
		// }, 100)
	}
</script>

<template>
	<view class="tab-conent">
		<up-tabs :list="list" @click="onTabsClickHandler"></up-tabs>
		<view style="padding: 20rpx;">
			<slot name="content"></slot>
		</view>
	</view>
</template>

<style lang="scss">
.tab-conent{
	background-color: #ffffff;
	width: 100%;
	display: flex; 
	flex-direction: row; 
	justify-content: space-between;
	align-items: center;
}
</style>
